<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>动画导航</title>
        <style>
        	*{margin:0;padding:0;}
        	#wrapper{
        		width: 100px;
        		/*height: 50px;*/
        		position: relative;
        		margin:50px auto;
        		perspective: 500px;
        	}
        	#wrapper div{
        		width: 100px;
        		height: 50px;
        		line-height: 50px;
        		padding:20px;
        		color: #676769;
        		background-color: #F5F6F8;
        		cursor: pointer;
        	}
        	#wrapper ul{
        		list-style: none;
        		position: absolute;
        		left:0;
        		top:90px;
        		background-color: #A6BC40;
        		padding:20px;
        		width: 100px;
        		animation:dropmen 1s ease 0s forwards;
        		display: none;
        	}
        	#wrapper.on ul{
        		display: block;
        	}
        	ul li{
        		height: 30px;
        		line-height: 30px;
        	}
        	ul li a{
        		text-decoration: none;
        		color: #fff;
        		font-weight: bold;
        	}
        	@keyframes dropmen{
				0%{
					transform: rotateY(90deg);
				}
				30%{
					transform: rotateY(-90deg);
				}
				60%{
					transform: rotateY(20deg);
				}
				80%{
					transform: rotateY(-20deg);
				}
				100%{
					transform: rotateY(0deg);
				}
        	}
        </style>
    </head>
    <body>
    	<div id="wrapper">
    		<div>项目</div>
    		<ul>
    			<li><a href="">合作</a></li>
    			<li><a href="">教育</a></li>
    			<li><a href="">医疗</a></li>
    			<li><a href="">健康</a></li>
    			<li><a href="">零售</a></li>
    		</ul>
    	</div>
    	<script>
    		var wrap = document.getElementById('wrapper');
    		wrap.onmouseover = function(){
    			this.className = 'on';
    		}
    		wrap.onmouseout = function(){
    			this.className = '';
    		}
    	</script>
    </body>
</html>